<template>
  <div class="diskInfoWrap">
    <el-row>
      <el-form
          :inline="true"
          :model="searchParams"
          style="width: 100%"
          size="small"
          class="formInline"
      >
        <el-form-item label="纳税人识别号：" style="max-width: 340px">
          <el-input
              style="width: 160px"
              v-model="searchParams.nsrsbh"
          ></el-input>
        </el-form-item>
        <el-form-item label="纳税主体名称：" style="max-width: 340px">
          <el-input
              style="width: 160px"
              v-model="searchParams.nsztName"
          ></el-input>
        </el-form-item>
        <el-form-item label="版式文件生成状态:" :style="{ maxWidth: '340px' }">
          <el-select v-model="searchParams.bswjsczt">
            <el-option value="Y" label="启用">启用</el-option>
            <el-option value="N" label="关闭">关闭</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发票开具状态:" :style="{ maxWidth: '340px' }">
          <el-select v-model="searchParams.fpkjzt">
            <el-option value="Y" label="启用">启用</el-option>
            <el-option value="N" label="关闭">关闭</el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="onSubmit" type="primary">查询</el-button>
          <el-button @click="onResize" type="primary">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row style="margin-bottom: 5px">
      <el-button @click="showUploadDialog" type="primary" size="small" v-if="hasAuth('VMS_FULL_BSWJ_ADD')">新增
      </el-button>
    </el-row>
    <tableList
        :data="listDetails"
        border
        :heightMin="130"
        :loading="loading"
        :keySet="keySet"
        :autoHeight="true"
        :tableData="listDetails"
        :paginationShow="true"
        :pageNumber="pages.current"
        :pageSize="pages.size"
        :total="pages.total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
    >
      <template #qyzt="{ row }">
        <el-switch
            :value="row.qyzt"
            :disabled="!hasAuth('VMS_FULL_BSWJ_ADD')"
            active-value="01"
            inactive-value="02"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeQyzt(row,'03')"
        >
        </el-switch>
      </template>
      <template #bswjsczt="{ row }">
        <el-switch
            :value="row.bswjsczt"
            :disabled="!hasAuth('VMS_FULL_BSWJ_ADD')"
            active-value="Y"
            inactive-value="N"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeQyzt(row,'01')"
        >
        </el-switch>
      </template>
      <template #fpkjzt="{ row }">
        <el-switch
            :value="row.fpkjzt"
            :disabled="!hasAuth('VMS_FULL_BSWJ_ADD')"
            active-value="Y"
            inactive-value="N"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeQyzt(row,'02')"
        >
        </el-switch>
      </template>
      <template #qzzpdz="{ row }">
        <div @click="previewImg(row)" style="color: #348bff;cursor: pointer">
          查看
        </div>
      </template>
      <template #cz="{ row }">
        <el-row>
          <el-col :span="12">
            <span @click="update(row)" style="color: #348bff;cursor: pointer"
                  v-if="hasAuth('VMS_FULL_BSWJ_ADD')">编辑</span>
          </el-col>
          <el-col :span="12">
            <span @click="del(row)" style="color: #348bff;cursor: pointer" v-if="hasAuth('VMS_FULL_BSWJ_ADD')">
              删除
            </span>
          </el-col>
        </el-row>
      </template>
    </tableList>
    <ImageDialog :base64Image="base64Image" :dialogVisible="dialogVisible"
                 @update:dialogVisible="dialogVisible = $event"/>
    <upload-dialog :dialogVisible="uploadVisible" ref="update"
                   @update:dialogVisible="uploadVisible = $event"/>
  </div>
</template>

<script>
import mixinTable from '@/mixin/mtable.js'
import tableList from '@/components/tableList/index.vue'
import {throttle} from 'lodash'
import ImageDialog from '@/views/invoiceTemplate/components/previewDialog.vue'
import DictSelect from '@/views/invoiceTemplate/components/DictSelect/DictSelect.vue'
import uploadDialog from "@/views/invoiceTemplate/components/uploadDialog.vue";
import {DictCode} from "@/utils/DictConstant";
import {changeZt, deleteById, getList, previewImg} from "@/api/invoiceTemplate";

export default {
  name: 'invoiceTemplate',
  computed: {
    DictCode() {
      return DictCode
    }
  },
  mixins: [mixinTable],
  data() {
    return {
      loading: false,
      listDetails: [],
      keySet: [
        {
          label: '纳税人识别号',
          englishName: 'nsrsbh',
          width: '200px'
        },
        {
          label: '纳税主体名称',
          englishName: 'nsztName',
          width: '300px'
        },
        {
          label: '区域代码',
          englishName: 'qydm',
          width: '100px'
        },
        {
          label: '区域名称',
          englishName: 'qymc',
          width: '100px'
        },
        {
          label: '使用单位编号',
          englishName: 'sydwbh',
          width: '250px'
        },
        {
          label: '启用状态',
          englishName: 'qyzt',
          isSlot: true,
          slotName: 'qyzt',
          align: "center"
        },
        {
          label: '版式文件生成状态',
          englishName: 'bswjsczt',
          isSlot: true,
          width: '200px',
          slotName: 'bswjsczt',
          align: 'center'
        },
        {
          label: '发票开具状态',
          englishName: 'fpkjzt',
          isSlot: true,
          slotName: 'fpkjzt',
          align: 'center'
        },
        {
          label: '电子签章照片',
          englishName: 'qzzpdz',
          isSlot: true,
          slotName: 'qzzpdz',
          width: '110px',
          align: "center"
        },
        {
          label: '接口开票人',
          englishName: 'jkkpkpr',
          width: '110px',
          align: "center"
        },
        {
          label: '机构编码',
          englishName: 'whjg',
          width: 'labelWidth'
        },
        {
          label: '维护人',
          englishName: 'whrmc',
          width: '80px'
        },
        {
          label: '维护时间',
          englishName: 'whsj',
          width: '150px'
        },
        {
          label: '操作',
          englishName: 'cz',
          isSlot: true,
          slotName: 'cz',
        }
      ],
      // 预览图片base64编码
      base64Image: '',
      dialogVisible: false,
      uploadVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    onResize() {
      this.onResizeFn()
      this.getList()
    },
    onSubmit() {
      this.pages.current = 1;
      this.getList()
    },
    getList: throttle(async function (params) {
      this.loading = true;
      let {data, code, message} = await getList({
        nsrsbh: this.searchParams.nsrsbh,
        nsztName: this.searchParams.nsztName,
        bswjsczt: this.searchParams.bswjsczt,
        fpkjzt: this.searchParams.fpkjzt,
        pageNo: this.pages.current,
        pageSize: this.pages.size,
      })
      if (code == 200) {
        this.loading = false
        this.listDetails = data.records.map(item => {
          return {
            ...item
          }
        })
        this.pages.total = data.total
        this.pages.current = data.current
        this.pages.size = data.size
      } else {
        // this.$message({
        //   type: 'success',
        //   message: message,
        // })
      }
      this.loading = false
    }, 500),
    async previewImg(row) {
      this.loading = true
      let params = {
        id: row.bswjid
      }
      let {data, code, message} = await previewImg(params);
      if (code == 200) {
        this.dialogVisible = true;
        this.base64Image = "data:image/png;base64," + data;
      } else {
        // this.$message({
        //   type: 'success',
        //   message: message,
        // })
      }
      this.loading = false
    },
    showUploadDialog() {
      this.uploadVisible = true;

    },
    changeQyzt(row, type) {
      let typeText = ""
      let statusText = ""
      let status = ""
      let str = "";
      if (type == '01') {
        typeText = "版式文件生成"
        statusText = row.bswjsczt == 'Y' ? "停用" : "启用";
        status = row.bswjsczt == 'Y' ? 'N' : 'Y'
        str = "请确认是否为当前机构" + statusText + typeText + "功能?"
      } else if (type == '02') {
        typeText = "发票开具"
        statusText = row.fpkjzt == 'Y' ? "停用" : "启用";
        status = row.fpkjzt == 'Y' ? 'N' : 'Y'
        str = "请确认是否为当前机构" + statusText + typeText + "功能?"
      } else {
        statusText = row.qyzt == '01' ? "停用" : "启用";
        status = row.qyzt == '01' ? '02' : '01'
        str = "请确认是否" + statusText + "当前机构?"
      }
      this.$msgbox({
        title: '提示',
        message: str,
        showCancelButton: true,
        confirmButtonText: '确定',
      }).then(async () => {
        let params = {
          id: row.bswjid,
          type: type,
          status: status,
          date: new Date()
        }
        let {code, data, message} = await changeZt(params)
        if (code == 200) {
          this.$message.success(data)
          await this.getList()
        } else {
          // this.$message({
          //   type: 'success',
          //   message: data,
          // })
        }
      });
    },
    update(row) {
      this.uploadVisible = true;
      this.$refs.update.row = row;
      this.$refs.update.dialogTitle = '数电发票启用及版式编辑';
      this.$refs.update.getDetail();
    },
    async del(row) {
      // 弹窗确认
      this.$msgbox({
        title: '提示',
        message: '是否确认删除当前数据?',
        showCancelButton: true,
        confirmButtonText: '确定',
      }).then(async () => {
        const {code, data, msg} = await deleteById(row.bswjid)
        if (code == 200) {
          this.$message.success("删除成功")
          await this.getList()
        }
      })
    }
  },
  components: {
    tableList,
    ImageDialog,
    DictSelect,
    uploadDialog
  },
}
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';

.diskInfoWrap {
  box-sizing: border-box;
  //   padding: 10px;
  .head {
    display: flex;
    height: 18px;
    align-items: center;
    margin-bottom: 4px;
    margin-top: 4px;

    .colCLas {
      width: 4px;
      height: 100%;
      background-color: $allBg;
      margin-right: 12px;
    }

    .info {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  .formInline :deep .el-form-item--small {
    margin-bottom: 4px;
  }
}
</style>
